<template>
  <div class="file">
    <div class="toolbar" @click="show = !show">
      <i :class="show ? 'el-icon-minus':'el-icon-plus'"></i>
    </div>
    <div style="float: left; margin-left: 15px; height: 35px;">
      <transition name="el-zoom-in-center">
        <div v-show="show" class>
          <!-- 文件选择 -->
          <el-popover ref="popover4" trigger="hover" placement="top">
            <div class="nav">
              <el-button type="text" @click="root">根目录</el-button>
              <el-button
                type="text"
                v-for="(item,index) of filePath"
                :key="index"
                @click="fileNav(index,item)"
              >{{item}}</el-button>
            </div>
            <el-button
              plain
              size="mini"
              v-for="(item,index) of files"
              @click="clickFile(item,index)"
              :key="index"
              class="file_button"
            >{{item.name}}</el-button>
          </el-popover>
          <el-button v-popover:popover4 size="small" style="float: left;">{{thisFile}}</el-button>
          <!-- 文件选择end -->
          <!-- <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="1"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>-->
        </div>
      </transition>
    </div>

    <!-- 缩略图 -->
    <div class="thumbnail_box" v-if="thumbnail">
      <div v-for="(item,index) of thumbnailList" :key="index" @click="handleCurrentChange(index)">
        <img :class="item.cla" :src="item.url" alt="zzz" />
      </div>
    </div>
  </div>
</template>
<script>
// import { FileOption, FileLogin, FileConvert } from "../../service/api";

export default {
  props: ["host", "imgIndex", "gxFile"],
  data() {
    return {
      show: true,
      thisFile: '选择文件',
      total: 0,
      // url: 'https://192.168.96.105:8083/api/no_token/reader.action',
      url: this.http.host + '/api/no_token/reader.action/',
      imgList: null,
      currentPage: 0,
      files: [{ name: '该房间还未上传文件' }],
      filePath: [],
      roomId: null,
      fileId: null,
      gxFilePath: null,
      thumbnail: false,
      thumbnailList: [],
      pre: 0,
      roomType: null,
      projectId: null,
      getImgListId: null
    }
  },
  watch: {
    gxFile: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV)
        this.fileId = newV.fileId;
        this.thisFile = newV.thisFile;
        this.gxFilePath = newV.filePath;
        this.thumbnail = newV.thumbnail;
        this.thumbnailList = newV.thumbnailList;
        this.pre = newV.pre;
        if (newV.imgList) {
          this.imgList = newV.imgList;
          this.total = newV.imgList.length;
        } else {
          this.imgList = null;
          this.total = 1;
        }
        this.currentPage = newV.imgIndex + 1;
      },
      deep: true
    }
  },
  mounted() {
    this.roomId = this.$route.query.id;
    this.getImgListId = this.roomId;
    this.roomType = this.$route.query.type;
    this.getFile('/', this.roomType, this.roomId);
  },
  methods: {
    root() { // 跳转根目录
      this.getFile('/', this.roomType, this.roomId);
      this.filePath = [];
      this.getImgListId = this.roomId;
    },
    fileNav(index, folder) { // 文件夹导航
      this.filePath.splice(index + 1, this.filePath.length);
      let path = "/" + this.filePath.join('/');
      this.getFile(path, this.roomType, this.roomId);
      this.getImgListId = this.roomId;
    },
    async getFile(path, roomType, roomId) { // 获取房间下的文件及文件夹
      let data = null;
      if (roomType == '1') { // 判断是任务房间
        data = {
          account: roomId,
          appid: "xnsjy",
          rooms: 1, //标识为房间的文件操作
          action: 'dir',
          path: path,       //相对于哪个目录操作
          sort: '0',
          oper: '1',
          keyword: ''
        }
      } else { // 项目房间
        data = {
          account: roomId,
          appid: "xnsjy",
          rooms: 1, //标识为房间的文件操作
          action: 'dir',
          path: path,       //相对于哪个目录操作
          sort: '0',
          keyword: ''
        }
      }
      let res = await this.http.post("/api/disk.action", data);
      console.log(data, res)
      if (res.ret == 1) {
        this.files = res.info;
        if (res.pro_roomid) {
          this.projectId = res.pro_roomid;
        }
      } else {
        this.$message({
          type: 'info',
          message: '文件获取失败！'
        });
      }
    },
    async clickFile(file, index) { // 选择查看文件和文件夹
      console.log("选择的文件：", file, file.type)
      let type = null;
      if (file.type == 'folder') {
        type = 'folder'
      } else {
        type = file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length)
      }
      console.log(type)
      if (type == 'folder') { // 点击了文件夹
        // 添加点击的导航文件夹
        this.filePath.push(file.name);
        // 生成新的文件夹路径
        let path = "/" + this.filePath.join('/');
        // 再次请求新的文件夹路径下的文件
        if (this.roomType == '1') { // 点击的是任务下的文件夹
          if (file.rel_type == 2 || file.rel_type == 3) { // 点击的任务下的需求文档和参考文档
            this.getFile(path, null, this.projectId);
            this.getImgListId = this.projectId; // 房间目前所用的
          } else if (file.rel_type == 6) { // 点击了任务下的图纸上传记录
            let data = {
              taskid: this.$route.query.taskId
            };
            // 请求到该文件下的图片列
            let res = await this.http.post("/api/task/file_record_list", data);
            this.files = res.info.rows;
            for (let i = 0; i < this.files.length; i++) {
              this.files[i].name = this.files[i].file_name
            }
            this.getImgListId = this.roomId;
            console.log(res)
          } else {
            this.getFile(path, null, this.roomId);
            this.getImgListId = this.roomId;
          }
        } else { // 点击的是项目下的文件夹
          this.getFile(path, null, this.roomId);
        }
      } else if (type == 'jpg' || type == 'png' || type == 'jpeg') { // 点击了图片
        if (this.host == 1) { // 点击文件的是否为主持人
          // 正在查看的文件名称
          this.thisFile = file.name;
          // 获取图片文件夹的路径
          let path = this.url + `?account=${this.getImgListId}&rooms=1&fileid=${file.id}`;
          console.log(path)
          // 图片没有分页，只有一页
          this.total = 1;
          // WSS发送选择文件信息
          let obj = {
            type: "selectFile",
            data: {
              fileId: file.id,
              imgIndex: 0,
              url: path,
              imgList: null,
              thisFile: file.name,
              filePath: this.filePath.join('/'),
              thumbnail: false,
              thumbnailList: [],
              pre: 0
            }
          };
          this.$parent.websocketsend(obj);
          this.thumbnail = false; // 图片不需要缩略图
        } else {
          this.$message({
            type: 'info',
            message: '您不是主持人，无权切换文件！'
          });
        }
      } else if (type == 'pdf' || type == 'doc' || type == 'docx' || type == 'ppt' || type == 'pptx' || type == 'xls' || type == 'xlsx' || type == 'dwg' || type == 'DWG') { // 点击了pdf,doc,docx,ppt,pptx,xls,xlsx,dwg,DWG
        console.log('jinlaile')
        if (this.host == 1) { // 点击文件的是否为主持人
          this.thumbnailList = [];
          // 正在查看的文件名称
          this.thisFile = file.name;
          // 默认选择第一页
          this.currentPage = 1;
          // 获取转换文件所需要的参数
          let data = {
            oper: 1,//1是获取该文件的image文件；；2是获取该文件的pdf文件
            account: this.getImgListId,
            appid: "xnsjy",
            rooms: 1,//标识
            fileid: file.id
          };
          let data1 = {
            oper: 0,//1是获取该文件的image文件；；2是获取该文件的pdf文件
            account: this.getImgListId,
            appid: "xnsjy",
            rooms: 1,//标识
            fileid: file.id
          };
          // 请求到该文件下的图片列
          console.log('参数：', data)
          let res = await this.http.post("/api/file_convert", data);
          // 获取缩略图
          let res1 = await this.http.post("/api/file_convert", data1);
          console.log('结果: ', res)
          for (let i = 0; i < res1.info.rows.length; i++) {
            let path = `?account=${this.getImgListId}&rooms=1&type=0&fileid=${file.id}&image=${res1.info.rows[i].name}`;
            path = this.url + path;
            let obj = {
              url: path,
              cla: ''
            }
            if (i == 0) {
              obj.cla = 'active'
            }
            this.thumbnailList.push(obj)
          }
          // 拼出第一张图的路径
          let path = `?account=${this.getImgListId}&rooms=1&type=1&fileid=${file.id}&image=${res.info.rows[0].name}`;
          path = this.url + path;
          this.pre = 0;
          // WSS发送选择文件信息
          let obj = {
            type: "selectFile",
            data: {
              fileId: file.id,
              imgIndex: 0,
              url: path,
              imgList: res.info.rows,
              thisFile: file.name,
              filePath: this.filePath.join('/'),
              thumbnail: true,
              thumbnailList: this.thumbnailList,
              pre: this.pre
            }
          };
          this.$parent.websocketsend(obj);
          this.thumbnail = true; // 显示缩略图
        } else {
          this.$message({
            type: 'info',
            message: '您不是主持人，无权切换文件！'
          });
        }
      } else {
        this.$message({
          type: 'info',
          message: '不支持该文件查看！'
        });
      }
    },
    handleCurrentChange(val) { // 点击切换页码
      if (this.host == 1) {// 点击文件的是否为主持人
        let i = val;
        this.thumbnailList[i].cla = 'active';
        this.thumbnailList[this.pre].cla = '';
        this.pre = i;
        console.log(i)
        let path = `?account=${this.getImgListId}&rooms=1&type=1&fileid=${this.fileId}&image=${this.imgList[i].name}`;
        path = this.url + path;
        console.log(path)
        // WSS发送选择文件信息
        let obj = {
          type: "selectFile",
          data: {
            fileId: this.fileId,
            imgIndex: i,
            url: path,
            imgList: this.imgList,
            thisFile: this.thisFile,
            filePath: this.gxFilePath,
            thumbnail: true,
            thumbnailList: this.thumbnailList,
            pre: this.pre
          }
        };
        this.$parent.websocketsend(obj);
      } else {
        this.$message({
          type: 'info',
          message: '您不是主持人，无权切换页码！'
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/* 缩略图样式 */
.thumbnail_box {
  position: fixed;
  left: 0;
  top: 65px;
  bottom: 65px;
  width: 180px;
  background: rgba(0, 0, 0, 0.432);
  padding: 10px;
  overflow-y: auto;
  img {
    width: 97%;
    cursor: pointer;
    margin-bottom: 10px;
    border: 2px solid rgb(255, 255, 255);
  }
  img:hover {
    border: 2px solid rgb(3, 245, 253);
  }
  .active {
    border: 2px solid rgb(224, 20, 20);
  }
}

.file {
  position: fixed;
  left: 15px;
  bottom: 15px;
  height: 35px;
  z-index: 12;
}
.nav {
  margin: 10px 5px;
}
.file_button {
  margin: 3px;
}
.toolbar {
  text-align: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 35px;
  font-size: 22px;
  cursor: pointer;
  float: left;
}
.toolbar:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.el-popover {
  text-align: center !important;
}
.block {
  display: inline-block;
  float: left;
  vertical-align: middle;
}
</style>